<template>
  <ul class="ul-flex">
    <li v-for="(item, index) in incomeData" :key="index" class="li-wrap" :style="{ background: `linear-gradient(180deg, ${item.beginColor} 0%, ${item.endColor} 100%)` }">
      <div class="li-left">
        <h6 class="h6-title">{{ item.title }}</h6>
        <p class="num">{{ item.size }}</p>
        <p v-if="item.tipsLeft" class="tips">{{ item.tipsLeft }}</p>
      </div>
      <div class="li-right">
        <img :src="item.iconUrl" alt="" class="icon-logo"/>
      </div>
    </li>
  </ul>
</template>

<script>
import {getStoreIncomeData1, getStoreIncomeData2, getStoreAvgData1} from '@/api/DashBoardApi';

export default {
  props: {
    bgmData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      incomeData: [
        {
          beginColor: '#f2f9fe',
          endColor: '#e6f4fe',
          title: '总应收',
          size: '0.00',
          tipsLeft: '',
          iconUrl: '/static/icon/board/icon_01.png'
        },
        {
          beginColor: '#f5fef2',
          endColor: '#e6feee',
          title: '总实收',
          size: '0.00',
          tipsLeft: '',
          iconUrl: '/static/icon/board/icon_02.png'
        },
        {
          beginColor: '#fffbf8',
          endColor: '#fef2e6',
          title: '收缴率',
          size: '0%',
          tipsLeft: '',
          iconUrl: '/static/icon/board/icon_03.png'
        },
        {
          beginColor: '#f6f7ff',
          endColor: '#ececff',
          title: '确认营业收入(权责)',
          size: '0.00',
          tipsLeft: '不含税',
          iconUrl: '/static/icon/board/icon_04.png'
        },
        {
          beginColor: '#fffbf8',
          endColor: '#fef2e6',
          title: '当年完成率＞',
          size: '0%',
          tipsLeft: '',
          iconUrl: '/static/icon/board/icon_05.png'
        },
        {
          beginColor: '#f5fef2',
          endColor: '#e6feee',
          title: '当月预算完成率＞',
          size: '0%',
          tipsLeft: '',
          iconUrl: '/static/icon/board/icon_06.png'
        },
        {
          beginColor: '#fff9fa',
          endColor: '#ffe5f2',
          title: '成本分析',
          size: '0.00',
          tipsLeft: '',
          iconUrl: '/static/icon/board/icon_07.png'
        },
        {
          beginColor: '#fff6f3',
          endColor: '#feece6',
          title: '毛利润分析',
          size: '0.00',
          tipsLeft: '',
          iconUrl: '/static/icon/board/icon_08.png'
        },
        {
          beginColor: '#f2fefb',
          endColor: '#c9fff8',
          title: '保证金(万元)',
          size: '0.00',
          tipsLeft: '',
          iconUrl: '/static/icon/board/icon_09.png'
        },
        {
          beginColor: '#f2f9fe',
          endColor: '#e6f4fe',
          title: '营业外收入(万元)',
          size: '0.00',
          tipsLeft: '不含税',
          iconUrl: '/static/icon/board/icon_10.png'
        }
      ]
    };
  },
  mounted() {
    this.getBiData({});
    this.getBiData2({});
    this.getBiData3({});
  },
  methods: {
    getBiData(parms) {
      this.loading = true;
      getStoreIncomeData1(parms)
        .then((res) => {
          if (res && res.obj) {
            this.incomeData[0].size = res.obj.totalReceivables;
            this.incomeData[1].size = res.obj.totalActualIncome;
            this.incomeData[2].size = parseFloat((res.obj.collRate * 100).toFixed(2)) + '%';
            this.incomeData[8].size = parseFloat((res.obj.bond / 10000).toFixed(2));
          }
        })
        .catch((error) => {
          console.error(error);
        });
      setTimeout(() => {
        this.loading = false;
      }, 1200);
    },
    getBiData2(parms) {
      this.loading = true;
      getStoreIncomeData2(parms)
        .then((res) => {
          if (res && res.obj) {
            this.incomeData[4].size = res.obj.curYearCompleteRate;
            this.incomeData[5].size = res.obj.curMonthBudgetCompleteRate;
            this.incomeData[6].size = res.obj.cost;
            this.incomeData[7].size = res.obj.grossMargin;
            this.incomeData[9].size = res.obj.notDoBusIncome;
          }
        })
        .catch((error) => {
          console.error(error);
        });
      setTimeout(() => {
        this.loading = false;
      }, 1200);
    },
    getBiData3(parms) {
      this.loading = true;
      getStoreAvgData1(parms)
        .then((res) => {
          if (res && res.obj) {
            this.incomeData[3].size = res.obj.confirIncome;
          }
        })
        .catch((error) => {
          console.error(error);
        });
      setTimeout(() => {
        this.loading = false;
      }, 1200);


    }
  }
};
</script>

<style lang="scss" scoped>
.ul-flex {
  display: flex;
  flex-flow: row wrap;

  .li-wrap {
    display: flex;
    align-items: center;
    width: 260px;
    height: 134px;
    border-radius: 20px;
    padding: 16px 20px;
    margin: 12px 20px 0 0;

    .li-left {
      flex: 1;
      align-self: flex-start;

      .h6-title {
        font-size: 14px;
        font-weight: 500;
        color: #1d252f;
      }

      .num {
        font-size: 20px;
        font-weight: bold;
        color: #1d2129;
        margin-top: 30px;
      }

      .tips {
        font-size: 12px;
        color: #4e5969;
        margin-top: 4px;
      }
    }

    .li-right {
      flex: 0 0 60px;

      .icon-logo {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>
